<template>
  <div class="bigbox">
      <el-form ref="form" :model="form" label-width="80px">
 <el-form-item label="品牌名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="品牌图片">
    <el-upload
  class="avatar-uploader"
  action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
  :headers="headers"
  name="good_pic">
  <img v-if="pinpai_imageUrl" :src="pinpai_imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>

  <el-form-item label="品牌列表图片">
    <el-upload
  class="avatar-uploader"
  action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
  :show-file-list="false"
  :on-success="handleAvatarSuccesss"
  :before-upload="beforeAvatarUpload"
  :headers="headers"
  name="good_pic">
  <img v-if="liebiao_imageUrl" :src="liebiao_imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>

  <el-form-item label="app专业图片">
    <el-upload
  class="avatar-uploader"
  action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
  :show-file-list="false"
  :on-success="handleAvatarSuccessss"
  :before-upload="beforeAvatarUpload"
  :headers="headers"
   name="good_pic">
  <img v-if="app_imageUrl" :src="app_imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>

  <el-form-item label="最低价">
    <el-input v-model="form.price"></el-input>
  </el-form-item>

   <el-form-item label="新品">
       <el-switch v-model="form.new" active-value="1"
              inactive-value="0"></el-switch>
  </el-form-item>

   <el-form-item label="显示">
       <el-switch v-model="form.show" active-value="1"
              inactive-value="0"></el-switch>
  </el-form-item>

  <el-form-item label="排序">
    <el-input v-model="form.number"></el-input>
  </el-form-item>

  <el-form-item label="品牌描述">
    <el-input type="textarea" v-model="form.miaoshu"></el-input>
  </el-form-item>

   <el-form-item>
            <el-button type="primary" @click="baocunFn">确认保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
          </el-form>
  </div>
</template>

<script>
import {addBrandLists,getBrandDetail} from '../../request/httpApi'
export default {
 data() {
      return {
        form: {
          name: '',
          number:0,
          value: true,
          price:0,
          number:0,
          miaoshu:'',
          new:false,
          show:false
        },
        imageUrl: '',
        headers:{
        'X-Nideshop-Token':localStorage.getItem('token')
      },
      pinpai_imageUrl:'' ,// 品牌图片
      liebiao_imageUrl:'', // 列表图片
      app_imageUrl:'', // app图片
      bid:0
      }
},

methods: {
    // 品牌图片
      handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        // console.log(file.response.data.fileUrl);
        this.pinpai_imageUrl = file.response.data.fileUrl
      },
      // 列表图片
      handleAvatarSuccesss(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(file.response.data.fileUrl);
        this.liebiao_imageUrl = file.response.data.fileUrl
      },
      // app图片
      handleAvatarSuccessss(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(file.response.data.fileUrl);
        this.app_imageUrl = file.response.data.fileUrl
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    
      // 保存
      baocunFn(){
        addBrandLists({
           id:this.bid,
            name:this.form.name,                 // 名称
            floor_price:this.form.price,         // 价格
            is_new:this.form.new ? 1 : 0,        // 新品
            is_show:this.form.show ? 1 : 0,      // 显示
            simple_desc:this.form.miaoshu,       // 描述
            app_list_pic_url:this.app_imageUrl,  // app图片
            pic_url:this.pinpai_imageUrl,        // 品牌图片
            list_pic_url:this.liebiao_imageUrl,  // 列表图片
            new_sort_order:this.form.number
      }).then((res)=>{
        console.log(res);
      })
      }
    },

    created(){
      // console.log(this.$route.params.bid);
      this.bid = this.$route.params.bid
      getBrandDetail({
        id:this.bid
      }).then((res)=>{
        console.log(res.data);
        this.form.name=res.data.name
        this.form.price=res.data.floor_price
        this.form.miaoshu=res.data.simple_desc
        this.pinpai_imageUrl=res.data.pic_url
        this.form.new=res.data.is_new.toString()
        this.form.show=res.data.is_show.toString()
        this.app_imageUrl=res.data.app_list_pic_url
        this.liebiao_imageUrl=res.data.list_pic_url
        this.form.number=res.data.new_sort_order
      })
    }
  }
</script>

<style lang="less" scoped>
.bigbox {
    background: #fff;
    padding-top: 20px;
  .el-form {
    padding-left: 40px;
  }
  /deep/ .el-input__inner {
    width: 260px;
  }
  /deep/ .el-textarea__inner {
    width: 260px;
  }
  /* /deep/ .el-upload {
    width: 200px;
    height: 120px;
    line-height: 120px;
  } */
  /deep/ .el-input__inner {
    width: 240px;
  }

  // 图片
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
 /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/ .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  /deep/ .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  /deep/  .avatar-uploader-icon{
     height: 120px; 
     line-height: 120px;
     width: 220px;
  }
}
</style>
